<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,, user-scalable=no"
    />
    <title>客户异常信息提交</title>
    <link
      rel="stylesheet"
      href="https://pyzl-static.oss-cn-guangzhou.aliyuncs.com/vendor/vant_2.12.54.css"
    />
    <style>
      .bitian {
        color: red;
        font-style: normal;
      }
      /* 页面容器 */
      .page-container {
        height: 100vh;
        box-sizing: border-box;
        background-color: #f5f5f5e8;
        display: flex;
        flex-direction: column;
      }

      /* 表单容器 */
      .form-container {
        min-height: 1px;
        flex: 1;
        background-color: #fff;
        border-radius: 8px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
      }

      /* 表单项间距 */
      .form-item {
        margin-bottom: 20px;
        border: 1px solid #e6e6e6;
        border-radius: 10px 10px 5px 5px;
        overflow: hidden;
      }

      /* 表单标签样式 */
      .form-label {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 8px;
        color: #151515;
        display: block;
        background: #d5ebf5;
        padding: 12px 10px;
        position: relative;
      }

      .form-label::before {
        position: absolute;
        content: "";
        width: 5px;
        background: #426786;
        height: 100%;
        top: 0;
        left: 0;
      }

      /* 文本域样式 */
      .van-field__textarea {
        min-height: 100px;
      }

      /* 上传组件容器 */
      .upload-container {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        padding: 20px;
        text-align: center;
        background-color: #fafafa;
        transition: all 0.3s;
      }

      .upload-container:hover {
        border-color: #07c160;
        background-color: #f6ffed;
      }

      /* 上传图标样式 */
      .upload-icon {
        font-size: 32px;
        color: #c9c9c9;
        margin-bottom: 8px;
      }

      /* 上传文字提示 */
      .upload-text {
        font-size: 14px;
        color: #999;
      }

      /* 上传文件列表 */
      .file-list {
        margin-top: 16px;
      }

      .file-item {
        display: flex;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
      }

      .file-name {
        flex: 1;
        font-size: 14px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .file-size {
        font-size: 12px;
        color: #999;
        margin-right: 12px;
      }

      .file-remove {
        color: #ff4d4f;
        font-size: 16px;
      }

      /* 底部按钮容器 */
      .button-container {
        margin-top: 20px;
        padding: 0 16px 16px;
        display: flex;
        justify-content: space-between;
      }

      /* 按钮样式 */
      .button-container .van-button {
        flex: 1;
        margin: 0 8px;
      }

      .p-10 {
        padding: 10px;
      }

      .m-l-5 {
        margin-left: 5px;
      }

      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        width: 100%;
      }

      #app {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
      }
    </style>
    <!-- <script>
      window._AMapSecurityConfig = {
        securityJsCode: "d7002c443afc2b8c14d49881ae10f509",
      };
    </script>
    <script src="https://webapi.amap.com/maps?v=2.0&key=9de31ea3e6547a99a8926014f5051931"></script> -->

    <script>
      window._AMapSecurityConfig = {
        securityJsCode: "5ef509de587c51c03fe42e23e768151b",
      };
    </script>
    <script src="https://webapi.amap.com/maps?v=2.0&key=ad5a25ef36204990cc56268c4af8c73a"></script>

    <script src="https://wxapp.jsadf.com/vendor/vue2.prod.bundle.js"></script>
    <script src="https://pyzl-static.oss-cn-guangzhou.aliyuncs.com/vendor/vant.2.15.54.min.js"></script>
  </head>

  <body>
    <div id="app">
      <div class="page-container">
        <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
          当前位置: {{ address || '' }}
        </van-notice-bar>
        <div class="form-container">
          <div class="form-item">
            <label class="form-label">
              <van-icon name="chat-o" />
              <span class="m-l-5">异常签收原因</span
              ><i class="bitian">(必填)</i></label
            >
            <van-radio-group v-model="isAbnormal" class="p-10">
              <van-radio name="0" style="margin-bottom: 8px"
                >拒绝电子签收</van-radio
              >
              <van-radio name="1" style="margin-bottom: 8px"
                >货物损坏</van-radio
              >
            </van-radio-group>
          </div>

          <div class="form-item">
            <label class="form-label"
              ><van-icon name="notes-o" /><span class="m-l-5"
                >异常签收备注</span
              ></label
            >
            <van-field
              v-model="remark"
              type="textarea"
              placeholder="请输入异常签收备注"
              rows="4"
              :border="true"
            />
          </div>

          <!-- 上传组件 -->
          <div class="form-item">
            <label class="form-label"
              ><van-icon name="photo-o" /><span class="m-l-5"
                >异常签收图片</span
              >
              <i class="bitian">(必填)</i></label
            >
            <van-uploader
              :after-read="afterRead"
              v-model="fileList"
              @delete="onDelete"
              class="p-10"
            />
          </div>
        </div>

        <!-- 底部按钮 -->
        <div class="button-container">
          <van-button round type="default" @click="onBack">返回</van-button>
          <van-button
            round
            type="primary"
            @click="onSubmit"
            :disabled="!isFuanjian"
            loading-text="图片上传中..."
            :loading="loadingsub"
            >提交</van-button
          >
        </div>
      </div>
    </div>

    <!-- <script src="./vconsole.min.js"></script>
    <script>
      // VConsole 默认会挂载到 `window.VConsole` 上
      var vConsole = new window.VConsole();
    </script> -->
    <script>
      (function (modExport) {
        var n = 3.141592653589793,
          e = 6378245,
          a = 0.006693421622965943;

        function o(t, o) {
          if (
            (function (t, n) {
              return t < 72.004 || t > 137.8347 || n < 0.8293 || n > 55.8271;
            })(t, o)
          )
            return [t, o];
          var r = (function (t, e) {
              var a =
                2 * t -
                100 +
                3 * e +
                0.2 * e * e +
                0.1 * t * e +
                0.2 * Math.sqrt(Math.abs(t));
              return (
                (a +=
                  (2 * (20 * Math.sin(6 * t * n) + 20 * Math.sin(2 * t * n))) /
                  3),
                (a +=
                  (2 * (20 * Math.sin(e * n) + 40 * Math.sin((e / 3) * n))) /
                  3) +
                  (2 *
                    (160 * Math.sin((e / 12) * n) +
                      320 * Math.sin((e * n) / 30))) /
                    3
              );
            })(t - 105, o - 35),
            s = (function (t, e) {
              var a =
                300 +
                t +
                2 * e +
                0.1 * t * t +
                0.1 * t * e +
                0.1 * Math.sqrt(Math.abs(t));
              return (
                (a +=
                  (2 * (20 * Math.sin(6 * t * n) + 20 * Math.sin(2 * t * n))) /
                  3),
                (a +=
                  (2 * (20 * Math.sin(t * n) + 40 * Math.sin((t / 3) * n))) /
                  3) +
                  (2 *
                    (150 * Math.sin((t / 12) * n) +
                      300 * Math.sin((t / 30) * n))) /
                    3
              );
            })(t - 105, o - 35),
            i = (o / 180) * n,
            c = Math.sin(i);
          c = 1 - a * c * c;
          var u = Math.sqrt(c);
          return (
            (r = (180 * r) / (((e * (1 - a)) / (c * u)) * n)),
            [t + (s = (180 * s) / ((e / u) * Math.cos(i) * n)), o + r]
          );
        }
        modExport.wgs84ToGcj02 = o;
      })((window.AMapUtils = window.AMapUtils || {}));

      /**
       * 使用高德地图来获取用户地址
       * @param {Number} x 经度
       * @param {Number} y 纬度
       */
      function tryGetAddressUseGaodeMap(x, y) {
        let searchType = ["公司", "仓库", "停车场"];

        function searchByTypes(lng, lat, types = [], radius = 1000) {
          return new Promise((resolve, reject) => {
            if (!Array.isArray(types) || types.length === 0) {
              return reject(new Error("类型数组不能为空"));
            }

            AMap.plugin("AMap.PlaceSearch", () => {
              const placeSearch = new AMap.PlaceSearch({
                city: "",
                pageSize: 10,
                pageIndex: 1,
              });

              placeSearch.searchNearBy(
                types.join("|"), // 使用 | 分隔多个类型
                [lng, lat],
                radius,
                (status, result) => {
                  if (status === "error") {
                    reject();
                    return;
                  }
                  if (status === "complete" && result.poiList) {
                    resolve(
                      result.poiList.pois.sort(
                        (a, b) => a.distance - b.distance
                      )
                    );
                  }
                  if (status === "no_data") {
                    resolve([]);
                  }
                }
              );
            });
          });
        }

        return new Promise(function (resolve, reject) {
          AMap.plugin("AMap.Geocoder", function () {
            let lnglat = AMapUtils.wgs84ToGcj02(+x, +y);
            return searchByTypes(lnglat[0], lnglat[1], searchType, 2000)
              .then((pois) => {
                resolve(pois);
              })
              .catch((err) => {
                reject(err);
              });
          });
        });
      }

      Vue.use(vant.Field);
      Vue.use(vant.Radio);
      Vue.use(vant.Button);
      Vue.use(vant.Uploader);
      Vue.use(vant.Toast);

      function getQueryObject() {
        url = window.location.href;
        var search = url.substring(url.lastIndexOf("?") + 1);
        var obj = {};
        var reg = /([^?&=]+)=([^?&=]*)/g;
        search.replace(reg, (rs, $1, $2) => {
          var name = decodeURIComponent($1);
          var val = decodeURIComponent($2);
          val = String(val);
          obj[name] = val;
          return rs;
        });
        return obj;
      }

      new Vue({
        el: "#app",
        data() {
          return {
            remark: "", // 备注文本框内容
            isAbnormal: "", // 是否异常单选值
            address: "",
            fileList: [],
            isFuanjian: false,
            loadingsub: false,
          };
        },

        async created() {
          console.log(":: DEBUG ::");
          var q = getQueryObject();
          console.log(q);

          this.__pageParams__ = q;
          this.__pageRedirct__ = q.pageRedirct || null;
          this.sdlnid = q.sdlnid || null;
          delete q.pageRedirct;

          // 有经纬度的情况下才获取页面数据
          if (q.latitude && q.longtitude) {
            this.handlePosition(q.longtitude, q.latitude);
            this.longtitude = q.longtitude;
            this.latitude = q.latitude;
            delete q.longtitude;
            delete q.latitude;
            return;
          }

          let gpsRedirectUrl =
            "https://wxapp.51yunmai.com/h5/wx-page/index.html?redirect=" +
            encodeURIComponent(location.href);
          location.href = gpsRedirectUrl;
        },

        methods: {
          handlePosition(x, y) {
            let vm = this;
            tryGetAddressUseGaodeMap(x, y).then(function (arr) {
              debugger;
              var target = (arr && arr[0]) || {};
              var address = (function () {
                if (target && target.address)
                  return target.address + target.name || "";
                return "未知位置";
              })();
              vm.address = address;
            });
          },

          handleFileUpload(data) {
            debugger;
            var fd = new FormData();
            Object.keys(data).forEach(function (k) {
              var val = data[k];
              fd.append(k, val);
            });
            return axios.post(
              "https://file.51yunmai.com/FileUploadInfo/Upload",
              fd,
              {
                transformRequest: [
                  function (data) {
                    return data;
                  },
                ], // 防止 Axios 默认转换 FormData
              }
            );
          },

          afterRead(e) {
            this.loadingsub = true;
            function pick(obj, propArr) {
              var ret = {};
              propArr.forEach(function (prop) {
                ret[prop] = (obj && obj[prop]) || "";
              });
              return ret;
            }
            var data = Object.assign(
              {},
              {
                file: e.file,
              },
              pick(this.__pageParams__, ["folder", "guid", "userName"])
            );

            this.handleFileUpload(data)
              .then((res) => {
                if (res.data === true) {
                  // 根据实际响应结构调整判断条件
                  vant.Toast("上传成功");
                  this.isFuanjian = true;
                  this.loadingsub = false;
                  return;
                } else {
                  vant.Toast("上传失败");
                }
              })
              .catch((error) => {
                console.error("请求失败", error);
                this.loadingsub = false;
              });
          },
          onDelete() {
            if (!this.fileList.length) this.isFuanjian = false;
          },
          // 提交表单
          async onSubmit() {
            var vm = this;

            // 表单验证
            if (!vm.isAbnormal) {
              vant.Toast("请选择是否异常");
              return;
            }
            if (!vm.isFuanjian) {
              vant.Toast("请先上传异常签收图片");
              return;
            }

            // 构建提交参数
            const submitData = {
              sdlnid: vm.sdlnid,
              abnormalReceiveRemarks: vm.remark,
              ReceiveReason: vm.isAbnormal,
              AdressList: vm.address,
              FileLongitude: vm.longtitude,
              FileLatitude: vm.latitude,
            };
            try {
              // 模拟提交请求
              console.log("提交的数据:", submitData);
              axios
                .post(
                  "https://www.51yunmai.com/ZSH_TruckInfo/abnormalWaybillReceive",
                  submitData,
                  {}
                )
                .then((res) => {
                  console.log("打印结果~~", res);
                  if (res.data.data === true) {
                    vant.Toast("提交成功");
                    location.href = vm.__pageRedirct__;
                  } else {
                    vant.Toast(res.data.msg || "提交失败");
                  }
                });
            } catch (error) {
              console.error("提交失败", error);
              vant.Toast("提交失败，请重试");
            }
          },

          // 返回按钮处理
          onBack() {
            location.href = this.__pageRedirct__;
          },
        },
      });
    </script>
  </body>
</html>
<!-- http://127.0.0.1:5500/kehuyichang.html?sdlnid=CL026250916-D001&openid=oM8KW6td9pqR6CSXTWwn-8v4AR5s&guid=%E6%B9%96%E5%8C%97%E7%9C%81-%E8%A5%84%E9%98%B3%E5%B8%82-%E5%AE%9C%E5%9F%8E%E5%B8%82-%E9%9B%B7%E6%B2%B3%E9%9B%B7%E9%9B%81%E5%A4%A7%E9%81%939%E5%8F%B7&userName=CL0E096&pageRedirct=http%3A%2F%2Ftms.hncljy.com%2FWeiXinTDInfo%2FTDLedgerList%3Fopenid%3DoM8KW6td9pqR6CSXTWwn-8v4AR5s%26TruckDoc%3DCL026250916-D001%26SendID%3D942ac3b7-5b82-412b-b9d2-a12f7c6e8ac3&latitude=31.426638&longtitude=112.337296 -->
